<template>
  <div>
    <div class="header">
        <div class="box">饿了么</div>
        <div class="search">
            <input type="text" placeholder="输入商家，商品名称">
        </div>
    </div>
    <div class="swiper">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F010421142927%2F210104142927-8-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668264481&t=6e59d1a3b796d1fd15d41c8a235e4b9e" alt="">
    </div>
    <div>
    <div class="box">猜你喜欢</div>
    <div class="sel">
         <span><select name="" id="select" ><option value="综合排序" v-for="(item , index) in option" :key="index">{{item}}</option></select></span>
        <span @click="mysort(index)" v-for="(item , index) in btnArr" :key="index">{{item}}</span>
    </div>
    <div class="spa">
        <span>年货节热卖</span>
        <span>津贴联盟</span>
        <span>满减优惠</span>
        <span>品质联盟</span>
    </div>
  </div>
  <div class="list">
      <h1>店铺列表</h1>
      <div class="shop" v-for="(item,index) in shoplist" :key="index">
        <div class="imgbox">
          <img :src="item.picUrl" alt="">
        </div>
        <div class="text">
          <div class="name">{{item.name}}</div>
          <div class="desc">{{item.minPriceTip}} {{item.monthSalesTip}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return {
            option:['综合排序','hhh'],
            btnArr:['距离最近','销量最高','筛选'],
            shoplist:[]
        }
    },
     mounted(){
        axios.get('/api/shop/list').then((res)=>{
        this.shoplist = res.data.list;
    })
    }
}
</script>

<style  scoped>
*{
    margin: 0;
    padding: 0;
}
.header{
    width: 100%;
    height: 80px;
    padding-top: 20px;
    background-color: cornflowerblue;
}
.header .box{
    color: white;
    margin: 0 20px;
}
.search{
    margin-left: 40px;
    margin-top: 10px;
}
.search input{
    text-align: center;
    width: 90%;
    height: 30px;
    border-radius: 25px;
    border: none;
}
.swiper img{
    width: 90%;
    height: 100px;
    margin-left: 17px;
    margin-top: 10px;
}
.box{
    font-size: 20px;
    font-weight: bold;
    margin:10px  20px;
}
.sel #select{
    border: none;
}
.sel span{
    display: inline-block;
    margin: 3px 15px;
    font-size: 14px;
    
}
.spa span{
    display: inline-block;
    margin: 10px 15px;
     font-size: 14px;
    background-color: #E3E4E5;
}
.list .shop{
  display: flex;
  margin: 10px;
}
.name{
  width: 260px;
}
.list .shop .imgbox{
  width: 60px;
  margin-right: 10px;
}
.list .shop .imgbox img{
  width: 100%;
}
</style>